<template>
  <div class="app-left-item">
    <subheadings name='地震活动断层探查管理系统' />
    <VisiteCount />
  </div>
  <div class="app-left-item">
    <subheadings name='各省系统使用活跃度排名（TOP3）' />
    <Ranking />
  </div>
  <div class="app-left-item statistics" :class="{ 'showMore': showMore }">
    <subheadings name='各省（直辖市）断层段数量情况统计' />
    <el-link type="primary" @click="showMore = !showMore" class="show-more" :underline="false">
      {{ showMore ? '收起' : '展开' }}
      <el-icon>
        <ArrowDown v-if="!showMore" />
        <ArrowUp v-if="showMore" />
      </el-icon>
    </el-link>
    <Statistics />
  </div>
</template>
<script setup>
import VisiteCount from './visiteCount.vue'
import Ranking from './ranking.vue'
import Statistics from './statistics.vue'

const showMore = ref(false)
</script>
<style scoped lang="scss">
.app-left-item {
  .subheadings {
    height: auto;
    background-size: cover;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  }
  &.statistics {
    min-height: 290px;

    &>.subheadings {
      margin-bottom: 0;
    }

    .show-more {
      position: absolute;
      top: 0;
      right: 10px;
      height: 80px;
      line-height: 80px;
    }

    &.showMore {
      position: absolute;
      height: 100%;
      top: 0;
      margin-top: 0;
    }
  }
}
</style>